<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <ul class="BT_epinasty">
      <li v-for="(item, index) in arr" class="BT_Econt" :key="index">
        <div><img :src="item.book_img_url" /></div>
        <!-- <div><img src="../../../static/img/v2_qsk67k.png" /></div> -->
        <div class="BT_Eitem">
          <div>{{ item.bookname }}</div>
          <div>{{ item.describes }}</div>
          <div>已播放至第{{ item.episodeNum }}集</div>
          <!-- <div>{{ item.episodeNum }}</div> -->
          <div class="BT_btn">
            <div>{{ item.money }}点券</div>
            <div><button @click="btnClick(item, index)">立即播放</button></div>
          </div>
        </div>
      </li>
      <div v-if="$store.state.bags.subscriptionData.length === 0" class="kong">
        <p class="iconfont icon-shoutidai">?</p>
        <p>你还没有订阅的内容哦</p>
      </div>
    </ul>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      arr: [],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    if (sessionStorage.getItem("userId")) {
      this.$store
        .dispatch("bags/getUserMsg", {
          userid: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          // console.log(res);
          this.$store
            .dispatch("login/getUser", {
              userid: sessionStorage.getItem("userId"),
            })
            .then((res) => {
              this.$store.state.bags.subscriptionData.forEach((item, index) => {
                let findIndex1 = this.arr.findIndex((item1, index1) => {
                  return item1.bookid === item.bookid;
                });
                if (findIndex1 === -1) {
                  this.arr.push(item);
                }
              });
              this.arr.forEach((item, index) => {
                let findIndex =
                  this.$store.state.login.loginuserMsg.viewing.cont.findIndex(
                    (item1, index1) => {
                      return item.bookid === item1.bookid;
                    }
                  );
                if (findIndex === -1) {
                  // 播放到
                  item.episodeNum = "1";
                } else {
                  console.log(
                    this.$store.state.login.loginuserMsg.viewing.cont[findIndex]
                  );
                  console.log(
                    this.$store.state.login.loginuserMsg.viewing.cont[findIndex]
                      .diversity
                  );
                  item.episodeNum =
                    this.$store.state.login.loginuserMsg.viewing.cont[
                      findIndex
                    ].diversity;
                  console.log(item, "item");
                }
              });
              console.log(this.arr);
            });
        });
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // console.log(this.$store.state.bags.subscriptionData)
  },
  // Vue方法定义
  methods: {
    btnClick(item, index) {
      this.$store.dispatch("bags/getCatalogData", { bookid: item.bookid });
      // this.$store.dispatch("bags/bookItem", item);
      this.$router.history.push({
        path: "/details",
        query: {
          path: this.$route.path,
        },
      });
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.kong {
  /* width: 50%;
  height: 250px;
  line-height: 50px;
  margin-left: 25%;
  margin-top: 100px; */
  top: 50%;
  left: 50%;
  margin-top: -0.933333rem;
  margin-left: -2.133333rem;
  position: absolute;
}
.kong p:nth-child(1) {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 35px;
  transform: rotate(-30deg);
  padding-left: 60px;
}
.kong p:nth-child(2) {
  font-size: 16px;
  font-family: PingFangSC-regular;
}

.BT_epinasty {
  width: 100%;
  position: relative;
  height: calc(100vh - 6.1244rem);
  padding: 0.4rem 0.4rem 1.333333rem;
  overflow-y: auto;
}
/* 每一个li */
.BT_Econt {
  display: flex;
  width: calc(100vw - 0.4rem);
  margin-bottom: 0.4rem;
}
.BT_Econt > div:nth-child(1) img {
  width: 2.506667rem;
  border-radius: 0.133333rem;
  height: 3.226667rem;
}
.BT_Eitem {
  margin-left: 0.24rem;
  width: calc(100vw - 3.646667rem);
}
.BT_Eitem > div:nth-child(1) {
  font-size: 0.426667rem;
  margin-top: 0.08rem;
  font-weight: 700;
  font-family: SimHei;
  color: #4d4d4d;
}
.BT_Eitem > div:nth-child(2) {
  font-size: 0.346667rem;
  margin-top: 0.106667rem;
  /* width: 6.32rem; */
  width: clac(100vw - 6.32rem);
  /* line-height: 18px; */
  height: 0.9rem;
  margin-bottom: 0.24rem;
  color: #646b77;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.BT_Eitem > div:nth-child(3) {
  /* margin-top: 16px; */
  font-size: 0.373333rem;
  color: #b0afb4;
}

/* 按钮 */
.BT_btn {
  display: flex;
  line-height: 0.72rem;
  margin-top: 0.106667rem;
  justify-content: space-between;
}
.BT_btn > div:nth-child(1) {
  font-size: 0.453333rem;
  color: #ff3c3c;
}
.BT_btn button {
  font-size: 0.266667rem;
  width: 1.626667rem;
  border-radius: 0.133333rem;
  color: #f44b65;
  height: 0.72rem;
  border: none;
  border: 2px solid #fab4c4;
  background-color: white;
}
</style>